<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
</head>
<body>
    <h1>伪类选择器</h1>
    <h2>anchor伪类选择器</h2>
    <style>
     a：link{
        color:blue;/*链接状态*/
     }
     a:visited{color: blueviolet;}/*访问后状态*/
     a:hover{
        color: chartreuse;/*覆盖状态*/
     }
a：active{color: chocolate;}/*访问状态*/
 
 </style>
 <a href="http://www.163.com" target="_blank">网易</a>
 <h2>匹配第一个元素</h2>
 <style>
    .p1:nth-child(1){
        color: darkmagenta;
    }
 </style>
 <div>
    <p class="p1">这是第一段</p>
     <p class="p1">这是第二段</p>
      <p class="p1">这是第三段</p>
 </div>
 <h2>checked伪类</h2>
 <style>
    input:checked{
        height: 30px;
        width: 30px;
        
    }
 </style>
 <form action="">
    <label for="f">女</label>
    <input type="radio" id="f" name="gender" value="female" checked>
     <label for="m">男</label>
    <input type="radio" id="m" name="gender" value="male">
 </form>
 <h2>选择某元素</h2>
 <style>/*odd表示奇数，even表示偶数*/
    table tr:nth-child(even){
        color: darkslateblue;
        background-color: khaki;
    }
 </style>
 <table cellspacing="0px" cellpadding="0px" border="1px">
    <tr>
        <td>one</td>
         <td>two</td>
          <td>three</td>
    </tr>
     <tr>
        <td>five</td>
         <td>six</td>
          <td>seven</td>
    </tr>
    <tr>
        <td>five</td>
         <td>six</td>
          <td>seven</td>
    </tr>
    <tr>
        <td>one</td>
         <td>two</td>
          <td>three</td>
    </tr>
 </table>
</body>
</html>